<template>
  <q-form @submit="submit" class="q-gutter-md dialog-content" ref="myForm" style="height: 567px">
    <div class="container">
      <yz-input v-model="queryParams.driver"
                inputType="select"
                class="content-width"
                :rules="[0]"
                :options="driverList"
                title="选择驱动"
      />
      <div v-if="queryParams.driver" class="driver-detail flex justify-between content-width margin-b-20">
        <div>
          <div>控制器类型: {{driverDetail[0]}}</div>
          <div>控制器型号: {{driverDetail[2]}}</div>
          <div>IOT接口: {{driverDetail[4]}}</div>
        </div>
        <div>
          <div>控制器品牌: {{driverDetail[1]}}</div>
          <div>协议名称: {{driverDetail[3]}}</div>
        </div>
        <div>驱动描述: {{ driverDescription }}</div>
      </div>

      <yz-input v-model="queryParams.version"
                inputType="select"
                class="content-width"
                :rules="[0]"
                :options="versionListAll"
                title="选择版本"
      />
      <yz-input v-model="queryParams.driverIp"
                inputType="input"
                class="content-width"
                :rules="[0]"
                title="IP"
      />

      <yz-input v-model="queryParams.driverPort"
                inputType="input"
                class="content-width"
                :rules="[0]"
                :hint-rule="[ val => val && /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(val) || '请输入合法端口0~65535']"
                title="端口"
      />
    </div>
    <q-separator />
    <div class="dialog-footer text-center margin-t-10">
      <q-btn outline label="取消" color="primary" @click="hideDialog" class="q-mr-md"/>
      <q-btn unelevated label="下一步" color="primary" type="submit" :loading="submitting"/>
    </div>
  </q-form>
</template>

<script>
import { getBindDriverList, plcDriverBind } from '../../../../../boot/miot/plc-list'

export default {
  name: 'driver-config',
  props: {
    type: {
      type: Number,
      default: 1
    },
    driverParams: {
      type: Object,
      default: () => {}
    },
    selectDriverInfo: {
      type: Object,
      default: () => {}
    }
  },
  created () {
    this.getDriverList()
  },
  data () {
    return {
      submitting: false,
      queryParams: {
        driver: '',
        version: '',
        driverIp: '',
        driverPort: ''
      },
      driverInfo: {},
      driverList: [],
      versionList: []
    }
  },
  watch: {
    'queryParams.driver': {
      handler: function () {
        this.queryParams.version = this.versionListAll[0]?.value || ''
      }
    }
  },
  computed: {
    versionListAll () {
      if (this.queryParams.driver) {
        return this.driverInfo[this.queryParams.driver] || []
      }
      return []
    },
    // 根据选择的driver获取详情
    driverDetail () {
      if (this.driverList.length > 0) {
        const info = this.driverList.find(item => item.value === this.queryParams.driver)
        return info?.label.split('_') || []
      }
      return []
    },
    driverDescription () {
      if (this.driverList.length > 0 && this.queryParams.driver) {
        return this.driverList.find(item => item.value === this.queryParams.driver)?.description || '--'
      }
      return '--'
    }
  },
  methods: {
    getDriverList () {
      const params = {
        gatewayId: this.driverParams.gatewayId,
        productId: this.driverParams.productId
      }
      getBindDriverList(params).then(res => {
        const resData = res.data
        if (resData) {
          const driverList = resData.map(item => {
            this.driverInfo[item.driverID] = item?.versionList?.map(v => ({
              label: v.version,
              value: v.version
            }))
            return {
              label: item.driverName,
              value: item.driverID,
              description: item.description
            }
          })
          this.driverList = driverList.filter(item => item.label.startsWith('PLC'))
        }

        // 回显数据
        if (this.selectDriverInfo && Object.keys(this.selectDriverInfo).length > 0) {
          this.queryParams.driver = this.selectDriverInfo.driver ? this.selectDriverInfo.driver : ''
          this.queryParams.driverIp = this.selectDriverInfo.driverIp ? this.selectDriverInfo.driverIp : ''
          this.queryParams.driverPort = this.selectDriverInfo.driverPort ? this.selectDriverInfo.driverPort : ''
          this.$nextTick(() => {
            this.queryParams.version = this.selectDriverInfo.version ? this.selectDriverInfo.version : ''
          })
        }
      })
    },
    submit () {
      const data = {
        'gatewayId': this.driverParams.gatewayId,
        'driverId': this.queryParams?.driver,
        'version': this.queryParams?.version,
        'driverIp': this.queryParams?.driverIp,
        'driverPort': this.queryParams?.driverPort,
        'subDeviceId': this.driverParams.subDeviceId,
        'productId': this.driverParams.productId
      }
      this.submitting = true
      plcDriverBind(data).then(res => {
        // 获取驱动名称
        const driverName = this.driverList.find(item => item.value === this.queryParams.driver)?.label + '_' + this.queryParams.version
        this.$emit('successSubmit', { driverName, ...res.data })
      }).finally(() => {
        this.submitting = false
      })
    },
    hideDialog () {
      this.$emit('hideDialog')
    }
  }
}
</script>

<style scoped lang="scss">
.content-width{
  width: 440px;
}
.container{
  height: 515px;
  //width: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .driver-detail{
    padding: 0 30px;
    font-size: 16px;
    line-height: 2;
  }
}

</style>
